<template>
    <div class="container">
        <div class="nav-content">
            <div
                v-for="(item, index) in navData"
                :key="index"
                @click="change(index)"
                :class="{ active: isactive == index }"
            >
                {{ item.text }}
            </div>
        </div>
        <div class="left-content">
            <logo></logo>
            <parking v-if="isOperationCenter"></parking>
            <situation v-if="isSmartParking"></situation>
            <weather v-if="isenvironmentalMonitoring"></weather>
            <camera v-if="isSecurityMonitoring"></camera>
            <asset v-if="isAssetInventory"></asset>
            <mini-map :transPosition="transPositions" v-if="isMap"></mini-map>
        </div>
        <div class="right-content">
            <!-- 天气时间 -->
            <times></times>
            <environment v-if="isOperationCenter"></environment>
            <security v-if="isOperationCenter"></security>
            <record v-if="isSmartParking"></record>
            <water v-if="isenvironmentalMonitoring"></water>
            <video-svl v-if="isSecurityMonitoring"></video-svl>
            <asset-right v-if="isAssetInventory"></asset-right>
        </div>
    </div>
</template>

<script>
//左边
import Logo from '@/components/school/LeftComponents/Logo' //logo
import MiniMap from '@/components/school/LeftComponents/MiniMap' //小地图
import Parking from '@/components/school/LeftComponents/Parking' //停车场
import Situation from '@/components/school/LeftComponents/Situation' //停车场态势
import Weather from '@/components/school/LeftComponents/Weather' //天气监测
import Camera from '@/components/school/LeftComponents/Camera' //摄像头监测
import Asset from '@/components/school/LeftComponents/Asset' //资产盘点
//右边
import Times from '@/components/school/RightComponents/Time' //时间天气
import Environment from '@/components/school/RightComponents/Environment' //环境监测
import Security from '@/components/school/RightComponents/Security' //智慧安保
import Record from '@/components/school/RightComponents/Record' //车辆通行记录
import Water from '@/components/school/RightComponents/Water' //水质监测
import VideoSvl from '@/components/school/RightComponents/Video' //视频监测
import AssetRight from '@/components/school/RightComponents/AssetRight' //资产图表

export default {
    name: 'SchoolNav',
    components: {
        Logo,
        MiniMap,
        Parking,
        Situation,
        Weather,
        Camera,
        Asset,
        //右边
        Times,
        Environment,
        Security,
        Record,
        Water,
        VideoSvl,
        AssetRight,
    },
    data() {
        return {
            transPositions: [],
            isactive: 2,
            isSmartParking: false, //智慧停车
            isOperationCenter: true, //运营中心
            isSecurityMonitoring: false, //安防监控
            isenvironmentalMonitoring: false, //环境监测
            isAssetInventory: false, //资产盘点
            isMap: false, //地图
            navData: [
                {
                    text: '智慧停车',
                },
                {
                    text: '环境监测',
                },
                {
                    text: '运营中心',
                },
                {
                    text: '安防监控',
                },
                {
                    text: '资产管理',
                },
            ],
        }
    },
    props: ['transPosition'],
    methods: {
        change(index) {
            this.isactive = index
            if (index == 0) {
                this.isSmartParking = true
                this.isOperationCenter = false
                this.isSecurityMonitoring = false
                this.isenvironmentalMonitoring = false
                this.isAssetInventory = false
            } else if (index == 1) {
                this.isSmartParking = false
                this.isOperationCenter = false
                this.isSecurityMonitoring = false
                this.isenvironmentalMonitoring = true
                this.isAssetInventory = false
            } else if (index == 2) {
                this.isSmartParking = false
                this.isOperationCenter = true
                this.isSecurityMonitoring = false
                this.isenvironmentalMonitoring = false
                this.isAssetInventory = false
            } else if (index == 3) {
                this.isSmartParking = false
                this.isOperationCenter = false
                this.isSecurityMonitoring = true
                this.isenvironmentalMonitoring = false
                this.isAssetInventory = false
            } else {
                this.isSmartParking = false
                this.isOperationCenter = false
                this.isSecurityMonitoring = false
                this.isenvironmentalMonitoring = false
                this.isAssetInventory = true
            }
        },
        init() {
            this.updata = function () {
                this.transPositions = this.transPosition
            }
        },
    },
    mounted() {
        this.init()
    },
    watch: {
        transPosition(n, o) {
            if (o != '') {
                this.updata()
            }
        },
    },
}
</script>

<style lang="less" scoped>
@import '../../assets/less/school.less';
.container {
    position: fixed;
    z-index: 2;
    .nav-content {
        width: 60%;
        height: 70px;
        position: fixed;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        justify-content: center;
        align-items: center;
        background-image: linear-gradient(to right, transparent, rgba(82, 102, 144, 0.9) 20% 80%, transparent);
        div {
            padding: 5px 10px;
            margin: 0 10px;
            color: #fff;
            font-size: 18px;
            cursor: pointer;
        }
        .active {
            border-radius: 50px;
            background-image: linear-gradient(to bottom, rgb(146, 178, 202), rgb(151, 150, 182));
        }
    }
    .left-content {
        width: 400px;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        display: flex;
        flex-direction: column;
        background-image: linear-gradient(
            to right,
            rgba(64, 87, 130, 0.8) 35%,
            rgba(64, 87, 130, 0.7) 65%,
            rgba(64, 87, 130, 0.5) 79%,
            rgba(64, 87, 130, 0.3) 86.5%,
            rgba(64, 87, 130, 0.2) 90%,
            transparent
        );
    }
    .right-content {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        width: 400px;
        height: 100%;
        position: fixed;
        top: 0;
        right: 0;
        z-index: -1;
        background-image: linear-gradient(
            to left,
            rgba(62, 85, 130, 0.8) 35%,
            rgba(64, 87, 130, 0.7) 65%,
            rgba(64, 87, 130, 0.5) 79%,
            rgba(64, 87, 130, 0.3) 86.5%,
            rgba(64, 87, 130, 0.2) 90%,
            transparent
        );
    }
}
</style>